<template>
    <teleport to="#modal">
        <div class="modal">
            <div class="mbox">
                <h2>{{ title }}</h2>
                <h3>{{ info }}</h3>
            </div>
        </div>
    </teleport>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
    setup() {
        const data = reactive({
            title: "弹窗",
            info: "这是一个modal弹窗",
        });

        return {
            ...toRefs(data),
        };
    },
});
</script>
<style lang="scss" scoped>
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba($color: #333, $alpha: 0.8);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    // 交叉轴对齐方式
    align-items: center;
    // 主轴对齐方式
    justify-content: center;

    .mbox {
        width: 600px;
        height: 400px;
        background: #fff;
    }
}
</style>